<template>
  <div class="ant-row" :class="classes">
    <slot></slot>
  </div>
</template>
<script>
  /**
   * App component.
   * @module common/Flex/Row
   * @author sea
   * @description 页面布局row组件
   * @property {Number}  gutter - 栅格间隔.
   * @property {String}  type - 布局模式，可选flex，现代浏览器下有效.
   * @property {String}  align - flex 布局下的垂直对齐方式：top middle bottom.
   * @property {String}  justify - flex 布局下的水平排列方式：start end center space-around space-between.
   */
  export default {
    name: 'Row',
    props: {
      /**
       * Indicates whether the widget is shiny.
       */
      gutter: Number,
      type: String,
      align: String,
      justify: String
    },
    mounted () {
      if (this.gutter) {
        this.updateGutter(this.gutter);
      }
    },
    updated () {
      if (this.gutter) {
        this.updateGutter(this.gutter);
      }
    },
    computed: {
      classes () {
        return [
          this.type ? `ant-row-${this.type}` : '',
          this.justify ? `ant-row-flex-${this.justify}` : '',
          this.align ? `ant-row-flex-${this.align}` : ''
        ];
      }
    },
    watch: {
      gutter (value) {
        this.updateGutter(value);
      }
    },
    methods: {
      updateGutter (value) {
        const half = value / 2;
        this.$el.style.marginLeft = `-${half}px`;
        this.$el.style.marginRight = `-${half}px`;

        for (const $child of this.$children) {
          $child.$el.style.paddingLeft = `${half}px`;
          $child.$el.style.paddingRight = `${half}px`;
        }
      }
    }
  };
</script>

<style type="scss">
  .ant-row {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
  }

  .ant-row:before,
  .ant-row:after {
    content: " ";
    display: table;
  }

  .ant-row:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
  }

  .ant-row-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .ant-row-flex:before,
  .ant-row-flex:after {
    display: flex;
  }

  .ant-row-flex-start {
    justify-content: flex-start;
  }

  .ant-row-flex-center {
    justify-content: center;
  }

  .ant-row-flex-end {
    justify-content: flex-end;
  }

  .ant-row-flex-space-between {
    justify-content: space-between;
  }

  .ant-row-flex-space-around {
    justify-content: space-around;
  }

  .ant-row-flex-top {
    align-items: flex-start;
  }

  .ant-row-flex-middle {
    align-items: center;
  }

  .ant-row-flex-bottom {
    align-items: flex-end;
  }
</style>

